<template>
  <div>
    <div :style="{
      height: size,
      width: size
    }" class="page-item" v-loading="data.isLoading">
      <!-- 正在加载中 -->
      <div v-if="!data.url"></div>
      <!-- 照片 -->
      <img class="page-image" v-else-if="data.fileType == 'image'" :src="data.url" />
      <!-- 显示图片的文件类型 -->
      <div class="page-icon" v-else-if="FILE_MAP_ICON[data.hzname]">
        <img :src="FILE_MAP_ICON[data.hzname].icon" />
        <div class="page-icon-name">{{ data.url }}</div>
      </div>
      <!-- 当没有配置显示图表的时候 -->
      <div class="page-icon" v-else>
        <img :src="FILE_MAP_ICON['*'].icon" />
        <div class="page-icon-name">{{ data.url }}</div>
      </div>
      <div class="page-btn">
        <!-- 照片 -->
        <template v-if="data.fileType == 'image'">
          <span @click="onClickBigImage()">放大</span>
        </template>
        <!-- 视频跟音频 -->
        <template v-else-if="data.fileType == 'audio' || data.fileType == 'video'">
          <i class="el-icon-video-play" @click="onClickBigImage()"></i>
          <!-- <i class="el-icon-download" @click="download()"></i> -->
        </template>
        <!-- 其他格式 -->
        <!-- <template v-else>
          <i class="el-icon-download" @click="download()"></i>
        </template>-->
        <span v-if="!readonly" @click="onClickdelete()">删除</span>
      </div>
    </div>
  </div>
</template>


<script lang="ts" >
import { defineComponent } from "vue";
export default defineComponent({
  name: "UploadShow",
});

</script>

<script lang="ts" setup>
import { withDefaults, computed } from "vue";
import { FILE_MAP_ICON } from "@/config/fileIcon";
import { MeFileClass } from "../config";

let props = withDefaults(defineProps<{
  /**
   * 传入数据
   */
  data: MeFileClass;

  /**
   * 是否只读
   */
  readonly?: boolean;

  /**
   * 大小
   */
  size?: string
}>(), {
  readonly: false,
  size: "148px",
  data: () => {
    return new MeFileClass("")
  }
})

let emit = defineEmits<{
  /**
   * 当点击查看大图的时候
   */
  (e: "clickBigImage", value: MeFileClass): void;
  /**
   * 当点击删除文件的时候
   */
  (e: "clickDelete", value: MeFileClass): void;
}>()

/**
 * 查看大图
 */
function onClickBigImage() {
  if (props.data) {
    emit("clickBigImage", props.data)
  }
}

/**
 * 删除当前文件
 */
function onClickdelete() {
  if (props.data) {
    emit("clickDelete", props.data)
  }
}

</script >

<style lang="less" scoped>
@import url(../main.less);
</style>
